<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Label input</title>
<script type="text/javascript" src="../jQuery/jquery.js"></script>
<style>
ul{list-style:none;margin:0px;padding:3px;overflow:hidden;width:100%;}
ul li{float:left;margin:0px;padding:0px;width:300px;position:relative;z-index:10;}
li label{position:absolute;left:85px;top:6px;z-index:5;color:#333;opacity:1;font-size:13px;}
input{height:20px;width:200px;border:1px solid #F69C3A;padding:4px 40px;}
input#author{background:transparent url(../images/author.png) no-repeat scroll left top;}
input#email{background:transparent url(../images/email.png) no-repeat scroll left top;}
input#website{background:transparent url(../images/url.png) no-repeat scroll left top;}
</style>
</head>

<body>
<ul>
	<li><label for="author">Name*</label><input type="text" name="author" id="author" /></li>
	<li><label for="email">Email*</label><input type="text" name="email" id="email" /></li>
	<li><label for="website">Website</label><input type="text" name="website" id="website" /></li>
</ul>
<script>
$(function(){
	$('input').bind('focus',function(){
		$(this).siblings('label').css('opacity',$.trim($(this).attr('value'))=='' ? 0.5 : 0);
	}).bind('keydown',function(){
		$(this).siblings('label').css('opacity',0);
	}).bind('blur',function(){
		$(this).siblings('label').css('opacity',$.trim($(this).attr('value'))=='' ? 1 : 0)
	})
});
</script>
</body>
</html>
